<!DOCTYPE html>
<html>
<head>
	<title>行走的小人</title>
	<style type="text/css">
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var Person = function (ctx) {
	// 绘制工具
	this.ctx = ctx || document.querySelector('canvas').getContext('2d');
	// 图片路径
	this.src = 'image/04.png';
	// 画布大小
	this.canvasWidth = this.ctx.canvas.width;
	this.canvasHeight = this.ctx.canvas.height;

	// 行走相关参数
	this.stepSize = 10;
	// 0 前 1 左 2 右 3 后 
	this.direction = 0;

	// x轴偏移步数
	this.stepX = 0;
	// y轴偏移的步数
	this.stepY = 0;

	// 初始化方法
	this.init();
};

Person.prototype.init = function() {
	// console.log(111111111111);
	var that = this;
	this.loadImage(function (image) {
		// 图片大小
		that.imageWidth = image.width;
		that.imageHeight = image.height;
		// 人物的大小
		that.personWidth = that.imageWidth/4;
		that.personHeight = that.imageHeight/4;

		// 绘制图片的起点
		that.x0 = that.canvasWidth/2 - that.personWidth/2;
		that.y0 = that.canvasHeight/2 - that.personHeight/2;

		/*2.默认绘制在中心位置正面朝外*/
        that.ctx.drawImage(image,
            0,0,
            that.personWidth,that.personHeight,
            that.x0,that.y0,
            that.personWidth,that.personHeight);

        /*3.能通过方向键去控制人物行走*/
        that.index = 0;
        document.onkeydown = function (e) {
            if(e.keyCode == 40){
                that.direction = 0;
                that.stepY ++;
                that.drawImage(image);
                /*前*/
            }else if(e.keyCode == 37){
                that.direction = 1;
                that.stepX --;
                that.drawImage(image);
                /*左*/
            }else if(e.keyCode == 39){
                that.direction = 2;
                that.stepX ++;
                that.drawImage(image);
                /*右*/
            }else if(e.keyCode == 38){
                that.direction = 3;
                that.stepY --;
                that.drawImage(image);
                /*后*/
            }
            }
	});
};
Person.prototype.loadImage = function(callback) {
	var image = new Image();
	image.onload = function () {
		callback && callback(image);
	};
	image.src = this.src;
};
// 绘制图片
Person.prototype.drawImage = function(image) {
	this.index ++;
	// 清除画布
	this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);

	// 绘图
	this.ctx.drawImage(image,
		this.index*this.personWidth,this.direction*this.personHeight,
		this.personWidth,this.personHeight,
		this.x0 + this.stepX * this.stepSize,this.y0 + this.stepY * this.stepSize,
		this.personWidth,this.personHeight,
	);
	if (this.index >= 3) {
		this.index = 0;
	}
};

new Person();
</script>
</html>